<template>
  <PageView :scrollable="false" ref="pageViewRef" :layout-vars="{showFooter:total>0}" v-loading="loading">
    <!-- 在向具名插槽提供内容的时候，我们可以在一个 template 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称v-slot:header 简写为#header   -->
    <template #header>
      <div class="app-section-header">
        <!--  查询模块   -->
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
          <el-form-item
              label="审核状态"
              prop="verifyStatus"
          >
            <el-select
                style="width: 130px"
                v-model="queryParams.verifyStatus"
                placeholder="请选择"
            >
              <el-option
                  v-for="item in queryParamsOptionsStates"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              label="申请人"
              prop="applicantName"
          >
            <el-input
                v-model="queryParams.applicantName"
                placeholder="请输入申请人姓名"
                clearable
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <!-- 默认插槽 这里也可以简写为v-slot="slotProps" 不带参数的 v-slot 被假定对应默认插槽：  -->
    <template v-slot:default="{contentHeight}">
      <!-- 表格 -->
      <el-table
          ref="table"
          v-if="contentHeight>0"
          :data="tableData"
          :height="contentHeight"
          border
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
      >
        <!--   单元格能多选   -->
        <el-table-column type="selection" width="55" align="center" />
        <!--   单元格序号   -->
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column
            prop="name"
            label="姓名"
            align="center"
        >
          <template v-slot="scope">
            <div class="link-type" @click="nameClicked">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="edit"
            label="编辑"
            align="center"
        >
          <template v-slot="scope">
            <el-row class="edit-colum">
              <el-button type="primary" @click="editBtnClicked">编辑</el-button>
              <el-button type="danger" @click="deleteBtnClicked">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!--  对话框弹窗  -->
      <el-dialog
          v-model="dialogVisible"
          title="弹窗标题"
          :before-close="handleClose"
          append-to-body
      >
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </template>
    <template #footer>
      <div class="app-section-footer">
        <!-- 分页   -->
        <Pagination
            v-show="total>0"
            :total="total"
            :currentPage="queryParams.pageNum"
            @pagination="getList"
        />
      </div>
    </template>
  </PageView>
</template>

<script lang="ts" setup>

</script>

<style>

</style>

<script>
/* eslint-disable */
<<<<<<< HEAD
import {apiManager, Http} from "@/util/apiManager";
import Cookies from 'js-cookie'
import request from '../../util/request'
// 禁止页面返回的第三方库
import preventBack from 'vue-prevent-browser-back';

import { vue } from 'vue'
import { renderAsync } from 'docx-preview';
import axios from "axios";
import {klBusinessStatistics} from "@/util/urlConfig";

// 引入xlsx插件
import * as XLSX from 'xlsx'
console.log('XLSX:', XLSX)

import {util} from "@/util/util";

// 一般用这种形式就行了
let docx = import('docx-preview');
console.log('docx:', docx)

import wx from 'weixin-js-sdk';
import {getWxConfigInfo} from "@/api/login";
import {getFileReq} from "@/api/test";
=======
import {getDriverInfo} from "@/api/khy-operatingcenter";
>>>>>>> 907a94c99d100dcf2e78f27e0ac947f2f5665db7

export default {
  name: "WebMain",
  components:{
  },
  props:{

  },
  data() {
    return {
      tableData:[],
      multipleSelection:[],

      // 加载状态
      loading:false,

      // 分页相关参数
      total:0,

      // 是否显示搜索
      showSearch:true,

      // 查询参数相关
      queryParams:{
        pageNum:1,
        pageSize:10,
        verifyStatus:null,
        applicantName:null,
      },

      // 审核状态
      queryParamsOptionsStates: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "通过",
        },
        {
          value: "1",
          label: "不通过",
        },
        {
          value: "2",
          label: "待审核",
        },
      ],

      // 控制弹窗显示
      dialogVisible:false,
      // 0 docx文件 1xlsx文件 2pdf
      scanType:0,

      excelData:[],
      workbook:{},
      elsxHtml:'',
    }
  },
  beforeCreate() {

  },
  setup() {

  },
  created() {
    this.getList()
  },
  mounted() {
    console.log('路由传入的参数信息', this.$route.query)
    console.log('获取分页数据')
  },
  methods:{
    getList(pageInfo) {
      this.loading = true
      this.updatePageInfo(pageInfo)
      const arr = []
      for (let i = 0; i < this.queryParams.pageSize; i++) {
        const item = {
          id:i,
          date: '2016-05-02',
          name: '秋哥',
          address: '湖北省武汉市洪山区',
        }
        arr.push(item)
      }
      const res = {
        total:20,
        rows:arr,
      }
      this.loading = false
      this.total = res.total
      this.tableData = res.rows

      setTimeout(()=> {
        // 表格单元行默认选中设置
        this.$nextTick(() => {
          for (const item of res.rows) {
            this.$refs.table.toggleRowSelection(item, true)
          }
        })
      }, 1000)

      let param = {
        auditStatus:1,
        billStatus: null,
        idCard: null,
        name:null,
        pageNum:1,
        pageSize:50,
        phone:null,
        submitSource:null,
        submitTime:null,
      }
      getDriverInfo(param).then(res => {

      }).catch(err => {

      })
    },

    /**
     * 分页组件变动 更新分页标记数据
     * @param val
     */
    updatePageInfo(val) {
      if (val) {
        this.queryParams.pageSize = val.pageSize
        this.queryParams.pageNum = val.pageNum
      }
    },

    /**
     * 单元格多选方法
     * @param val
     */
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      console.log('当前选择的单元格数据', this.multipleSelection)
    },

    /**
     * 搜索按钮点击事件
     */
    handleQuery() {
      console.log('handleQuery:', this.queryParams)
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /**
     * 查询表单重置
     */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },

    tableRowClassName({row, rowIndex}) {
      // console.log('rowIndex:', rowIndex)
      if (rowIndex == 1) {
        return 'warning-row';
      } else if (rowIndex == 3) {
        return 'success-row';
      } else if (rowIndex == 9) {
        return 'danger-row';
      }
      return '';
    },

    /**
     * 姓名点击事件
     */
    nameClicked() {
<<<<<<< HEAD
      const openType = 0
      if (openType == 2) {
        this.scanDocxFileOnline();
      } else if (openType == 1) {
        // 查看xlsx使用fetch请求或者xml请求
        // this.getFileDataByFetchReq()
        this.scanExcelFileOnlineXMLReq()
      } else {
        // 开一个新的二级页面
        // this.$router.push('/main/userInfo')
        this.scanDocxFileOnline()
      }

    },

    /**
     * 在线预览查看docx文件
     */
    scanDocxFileOnline() {
      let filePath = 'https://view.officeapps.live.com/op/view.aspx?src=http://zhongwei-info.com/uploadFiles/vipStore/img/2023071310320851256.docx'

      // docx
      filePath = 'http://jifutongjr.com/files/1352873948298.docx'
      filePath = 'http://static.shanhuxueyuan.com/test6.docx'
      // filePath = 'http://118.190.151.58:5838/docx文档.docx'
      // filePath  = process.env.VUE_APP_BASE_TEST_API + '/docx文档.docx'

      // window.open()居中打开
      // const width = 1000; const height = 800
      // const top = (window.screen.availHeight - height) / 2
      // const left = (window.screen.availWidth - width) / 2
      // window.open(filePath, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)
      // return

      // PPTX
      // filePath = 'https://zw-resource.oss-cn-shenzhen.aliyuncs.com/store_path_ios/1689298386_%E5%9B%BD%E5%AE%B6%E5%AE%89%E5%85%A8%E6%95%99%E8%82%B2.pptx'

      // .xlsx
      // filePath = 'https://xrzj-app.oss-cn-shanghai.aliyuncs.com/xrcdn/scm-erp/%E5%85%A5%E5%BA%93%E5%8D%95%E6%A8%A1%E7%89%88%E6%96%B0.xlsx'

      // 微软打开
      // let newPath = 'https://view.officeapps.live.com/op/view.aspx?src=https://xrzj-app.oss-cn-shanghai.aliyuncs.com/xrcdn/scm-erp/入库单模版新.xlsx'
      // window.location.href = newPath;

      if (filePath.indexOf('.docx') > -1) {
        this.dialogVisible = true

        getFileReq().then(response => {
          // 将文件转换成blob形式
          console.log('response', response)
          let docData = response;
          console.log('docData:', docData)

          // 选择要渲染的元素
          let childRef = document.getElementsByClassName('childRef');
          console.log('childRef:', childRef)

          if (childRef) {
            // 用docx-preview渲染
            renderAsync(docData, childRef[0]).then((res) => {
              console.log('docx文档数据解析成功:', res);
            });
          }
        }).catch(err => {
          console.log('docx查看失败：', err);
        })

        // fetch(filePath).then((response) => {
        //   // 将文件转换成blob形式
        //   let docData = response.blob();
        //   console.log('docData:', docData)
        //
        //   // 选择要渲染的元素
        //   let childRef = document.getElementsByClassName('childRef');
        //   console.log('childRef:', childRef)
        //
        //   if (childRef) {
        //     // 用docx-preview渲染
        //     renderAsync(docData, childRef[0]).then((res) => {
        //       console.log('docx文档数据解析成功:', res);
        //     });
        //   }
        // }).catch((error) => {
        //   console.log('docx查看失败：', error);
        // });
      }
    },

    /**
     * 在新的浏览器页面查看文档 使用第三方的接口（或者在当前浏览器页面查看 点击浏览器返回可以回到进入前的页面）
     * @param url
     */
    openFileInOtherBrowserByUrl(url) {
      url = 'https://view.officeapps.live.com/op/view.aspx?src=https://xrzj-app.oss-cn-shanghai.aliyuncs.com/xrcdn/scm-erp/入库单模版新.xlsx'
      // window.location.href = newPath;
      window.open(url)
=======
      // 开一个新的二级页面
      this.$router.push('/main/userInfo')
>>>>>>> 907a94c99d100dcf2e78f27e0ac947f2f5665db7
    },

    /**
     * 弹窗关闭
     */
    handleClose() {
      this.dialogVisible = false
    },

    editBtnClicked() {
      console.log('编辑')
    },

    deleteBtnClicked() {
      console.log('删除')
      this.$modal.showConfirmAlert('提示', '确认删除吗?')
          .then(() => {

            this.$message.success('删除成功')
          })
          .catch(() => {
            this.$message.info('取消')
          })
    },
  }
}
</script>

<style lang="scss" scoped>
// 引入公共样式文件 scss
@import '../../assets/styles/public.scss';

/*在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。可以写到一个样式文件中 引入即可*/
.el-table .warning-row {
  background-color: $warning-color;
}

.el-table .success-row {
  background-color: $success-color;
}

.el-table .danger-row {
  background-color: $danger-color;
}

// 查看docx文档时 生成的盒子
:deep(.docx-wrapper) {
  background-color: #fff;
  padding: 0;
}

:deep(.docx-wrapper > section.docx) {
  width: 100% !important;
  padding: 0rem !important;
  min-height: auto !important;
  box-shadow: none;
  margin-bottom: 0;
}

</style>
